<template>
    <n-form ref="formRef" :model="form" class="my-4" label-placement="left" :label-width="160" :rules="rules">

        <FormItemComponent path="name" title="场景名称：" tips="场景名称，用于简短概述该场景">
            <n-input v-model:value="form.name" placeholder="请输入场景名称" />
        </FormItemComponent>
        <FormItemComponent path="description" title="场景描述：" tips="场景描述，用来详细描述该场景">
            <n-input v-model:value="form.description" type="textarea" placeholder="请输入场景描述" />
        </FormItemComponent>
        <FormItemComponent title="数据文件：" tips="用于上传数据，点击下载文件模板可以下载相应的数据格式模板">
            <n-flex vertical>
                <n-upload v-model:file-list="file_list" @change="handleChange" directory-dnd :max="1">
                    <n-upload-dragger>
                        <div style="margin-bottom: 12px">
                            <n-icon size="48" :depth="3">
                                <ArchiveOutline />
                            </n-icon>
                        </div>
                        <n-text style="font-size: 16px">
                            点击或者拖动文件到该区域来上传
                        </n-text>
                        <n-p depth="3" style="margin: 8px 0 0 0">
                            请不要上传敏感数据，比如你的银行卡号和密码，信用卡号有效期和安全码
                        </n-p>
                    </n-upload-dragger>
                </n-upload>
                <n-button @click="downloadDataFileTemplate()" secondary>下载文件模板</n-button>
            </n-flex>
        </FormItemComponent>
        <FormItemComponent title="封面缩略图：" tips="请上传场景封面缩略图">
            <n-upload v-model:file-list="image_list" @change="handleImageChange" directory-dnd :max="1">
                <n-button>上传图像</n-button>
            </n-upload>
        </FormItemComponent>
        <FormItemComponent v-for="(i, index) in form.key_list" :key="index" :title="'自定义属性' + (index + 1) + '：'"
            tips="请配置自定义属性名称">
            <n-input disabled placeholder="请输入属性的名称" class="w-full" v-model:value="i.label" />
        </FormItemComponent>
        <n-flex justify="end">
            <n-button @click="submitCreate" type="primary">
                提交
            </n-button>
        </n-flex>
    </n-form>
</template>

<script setup>
import FormItemComponent from '@/components/FormItemComponent.vue';
import { ref } from 'vue';
import { ArchiveOutline } from '@vicons/ionicons5';
import { useScenarioStore } from '@/stores/scenarioStore';
import { useMessage } from "naive-ui";
const message = useMessage();
const scenarioStore = useScenarioStore();
const file_list = ref([]);
const image_list = ref([]);
const formRef = ref(null);
const emit = defineEmits(["finish_create"]);

const rules = {
    name: {
        required: true,
        message: "请输入场景名称",
        trigger: ["input", "blur"]
    }
    ,
    description: {
        required: true,
        message: "请输入场景描述",
        trigger: ["input", "blur"]
    }
    ,
};

const handleChange = (options) => {
    if (options.fileList != 0) {
        const file = options.fileList[0].file;
        var reader = new FileReader();
        reader.onload = function () {
            const result = reader.result;
            var lines = result.split("\r\n")[0].split(",");
            for (let i = 1; i < lines.length; i++) {
                form.value.key_list.push({
                    "label": lines[i]
                });
            }
        };
        reader.readAsText(file, "gb2312");
    } else {
        form.value.key_list = [];
    }

};
const handleImageChange = (options)=>{
    if(options.image_list!= 0){
        const file = options.fileList[0].file;
    }
}
const form = ref({
    name: null,
    description: null,
    key_list: []
})

const submitCreate = (e) => {

    e.preventDefault();
    formRef.value?.validate((errors) => {
        if (!errors) {
            message.success("提交成功！");
            var formdata=new FormData();
            formdata.append("name", form.value.name);
            formdata.append("description", form.value.description);
            formdata.append("key_list", JSON.stringify(form.value.key_list));
            formdata.append("file", file_list.value[0].file);
            formdata.append("image", image_list.value[0].file);
            scenarioStore.createScenario(formdata);
            emit('finish_create');
        } else {
            message.error("提交失败，请完善表单！");
        }
    });
}
const downloadDataFileTemplate = () => {
    scenarioStore.getDataFileTemplate('数据模板.csv');
}


</script>